<template>
    <a-modal
        v-model:visible="visible"
        :title="title"
        :ok-text="t('okText')"
        :cancel-text="t('cancelText')"
        :maskClosable="false"
        :width="800"
        @cancel="handleCancel"
        @ok="handleOk"
    >
        <a-form
            ref="processBaseForm"
            :model="processModal.baseForm"
            :rules="baseFormRules"
            :label-col="processModal.labelCol"
            :wrapper-col="processModal.wrapperCol"
        >
            <!-- 所属应用 -->
            <a-form-item :label="t('applicationId')" name="applicationId">
                <a-select
                    v-model="processModal.baseForm.applicationId"
                    :disabled="true"
                    @select="handleApplicationChange"
                >
                    <a-select-option
                        v-for="application in fetchResponse.application"
                        :key="application.id"
                        :value="application.id"
                    >
                        {{ application.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <!-- 流程名称 -->
            <a-form-item :label="t('processName')" name="processName">
                <a-input v-model="processModal.baseForm.processName" />
            </a-form-item>
            <!-- 流程类型 -->
            <a-form-item :label="t('processType')" name="processType">
                <a-select v-model="processModal.baseForm.processType">
                    <a-select-option v-for="type in processType" :key="type.value" :value="type.value">
                        {{ type.label }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <!-- 流程描述 -->
            <a-form-item :label="t('processDescription')" name="processDescription">
                <a-input v-model="processModal.baseForm.processDescription" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
    import { defineComponent, ref, watch, toRefs, reactive } from 'vue'

    // 国际化
    import { useI18n } from 'vue-i18n'

    export default defineComponent({
        name: 'AddOrEditProcessModal',
        props: {
            toggleVisible: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '新建基础设置'
            }
        },
        emits: ['cancel'],
        setup(props, { emit }) {
            // 创建响应式数据部分
            const { t } = useI18n()
            const { toggleVisible } = toRefs(props)

            const visible = ref<boolean>(false)
            // 校验字段
            const baseFormRules = {
                processName: [
                    {
                        required: true,
                        message: t('processNameRule'),
                        trigger: 'blur'
                    }
                ],
                processType: [
                    {
                        required: true,
                        message: t('processTypeRule'),
                        trigger: 'blur'
                    }
                ],
                applicationId: [
                    {
                        required: true,
                        message: t('applicationIdRule'),
                        trigger: 'blur'
                    }
                ],
                pageId: [
                    {
                        trigger: 'blur',
                        message: t('pageIdRule'),
                        validator: (_rule, value: string, callbackFun: Function) => {
                            if (value) {
                                return callbackFun()
                            }
                            callbackFun(t('pageIdRule'))
                        }
                    }
                ]
            }
            // 表单相关的响应式数据
            const processModal = reactive({
                // 表单提交部分
                baseForm: {
                    // 流程名称
                    processName: '',
                    // 流程类型
                    processType: '',
                    // 流程描述
                    processDescription: '',
                    // 应用id
                    applicationId: '',
                    // 表单id
                    pageId: null
                },
                labelCol: { span: 4 },
                wrapperCol: { span: 18 }
            })

            const fetchResponse = reactive({
                // 请求接口数据
                application: []
            })

            // 监控显隐弹框
            watch(
                () => toggleVisible.value,
                val => {
                    visible.value = val
                }
            )

            // 事件部分
            const handleCancel = () => {
                emit('cancel', false)
            }

            // 所属应用select切换
            const handleApplicationChange = () => {
                // TODO
            }

            // 新建流程确认事件
            const handleOk = () => {
                // TODO
            }

            return {
                t,
                visible,
                handleCancel,
                // 表单相关
                processModal,
                baseFormRules,
                fetchResponse,
                // 所属应用select切换
                handleApplicationChange,
                // 新建流程确认事件
                handleOk
            }
        }
    })
</script>

<i18n>
zh-CN:
  okText: '确认'
  cancelText: '取消'
  base: '基础设置'
  form: '表单关联'
  processName: '流程名称'
  processType: '流程类型'
  processDescription: '流程描述'
  applicationId: '所属应用'
  pageId: '表单名称'
  name: '名称'
  visibility: '可见'
  editable: '可编辑'
  condition: '运算'
  confirm: '是否确认进行该流程操作?'
  value: '数值'
  processNameRule: '请输入流程名称'
  processTypeRule: '请选择流程类型'
  applicationIdRule: '请选择所属应用'
  pageIdRule: '请选择流程关联表单'
  success: '保存成功'
  addSuccess: '创建成功'
en-US:
  okText: 'confirm'
  cancelText: 'cancel'
  base: 'Basic settings'
  form: 'Form Association'
  processName: 'Process name'
  processType: 'Process type'
  processDescription: 'Process description'
  applicationId: 'Application'
  pageId: 'Form name'
  name: 'name'
  visibility: 'so'
  editable: 'Editable'
  condition: 'operation'
  confirm: 'Are you sure to proceed with this process?'
  value: 'numerical value'
  processNameRule: 'Please enter process name'
  processTypeRule: 'Please select a process type'
  applicationIdRule: 'Please select your app'
  pageIdRule: 'Please select a process association form'
  success: 'Saved successfully'
  addSuccess: 'Created successfully'
</i18n>
